<!-- 时间选择组件 -->
<template>
	<uni-popup ref="popup" type="bottom" @maskClick='close2' @change="change">

		<view class="timeSelectBox" ref="timeSelectBox2">
			<!-- 操作区 -->
			<view class="top">
				<view class="top-left" @click="close2">取消</view>
				<view class="top-center">选择服务时间</view>
				<view class="top-right" @click="submit2">确定</view>
			</view>

			<!-- 选中时间展示 -->
			<view class="center">
				<view :class="{
						'center-item':true,
						'center-active':res.status
					}" v-for="res in selectTimeShow" @click="setTimeShowStatus(res)">
					<text class="center-title">{{res.title}}</text>
					<text class="center-text">{{res.value}}</text>
					<view v-if="res.status" class="center-line"></view>
				</view>
			</view>

			<!-- 选择时间 -->
			<view class="bottom">
				
				<TimeSelect v-if="selectTimeShow[0].status"  :popHeight="popHeight" :time="selectTimeShow[0].value" @change="timeSelectChange1">
				</TimeSelect>

				<TimeSelect v-if="selectTimeShow[1].status" :popHeight="popHeight" :time="selectTimeShow[1].value" @change="timeSelectChange2">
				</TimeSelect>
			</view>
		</view>

	</uni-popup>
</template>

<script>
	//页面组件
	import TimeSelect from './timeSelect.vue'
	

	export default {
		components: {
			TimeSelect
		},
		props: {
			show: {
				type: Boolean,
				default: false,
			},
			submit: {
				type: Function,
				default: () => {}
			},
			close: {
				type: Function,
				default: () => {}
			},
			
			/**
			 * 开始时间
			 */
			startTime: {
				type: String,
				default: ''
			},
			/**
			 * 结束时间
			 */
			endTime:{
				type: String,
				default: ''
			},
			
			/**
			 * 是否穿透
			 */
			setPagemetaShow:{
				type:Function,
				default:()=>{}
			}
		},
		data() {
			return {
				value1: Number(new Date()),

				popHeight: 0, // 弹出层高度

				timeData1: '', // 时间数据
				timeData2: '', // 时间数据
				

				// 选中时间展示
				selectTimeShow: [{
						title: '开始时间',
						value: '00:00',
						status: true,
						type: false
					},
					{
						title: '结束时间',
						value: '00:00',
						status: false,
						type: false
					},
				]
			};
		},
		mounted() {
			this.popHeight = this.$refs.popup.popupHeight
			
			
			// 赋值
			if(this.startTime && this.endTime){
				this.selectTimeShow[0].value = this.startTime.slice(0,this.startTime.length-3)
				this.selectTimeShow[1].value = this.endTime.slice(0,this.endTime.length-3)
				
				this.selectTimeShow[0].type = true
				this.selectTimeShow[1].type = true
			}

		},

		watch: {
			show(val) {
				val ? this.$refs.popup.open('bottom') : this.$refs.popup.close()
			},
		},
		

		methods: {
			/**
			 * 修改开始时间
			 */
			timeSelectChange1(val) {
				if(val !== this.selectTimeShow[0].value){
					
					// 赋值
					this.selectTimeShow[0].value = val
					
					// 是否选择过了
					this.selectTimeShow[0].type = true
				}
				
			},

			/**
			 * 修改结束时间
			 */
			timeSelectChange2(val) {
				if(val !== this.selectTimeShow[1].value){
					
					// 赋值
					this.selectTimeShow[1].value = val
					
					// 是否选择过了
					this.selectTimeShow[1].type = true
				}
			},



			/**
			 * 更改选中的是开始时间还是结束时间
			 */
			setTimeShowStatus(val) {
				this.selectTimeShow.forEach((res, index) => {
					this.selectTimeShow[index].status = res.title === val.title ? true : false
				})
			},

			/**
			 * 关闭时间选择
			 */
			close2() {
				this.$emit('close')
			},

			/**
			 * 点击确定
			 */
			submit2() {
				// 是否都选择了
				let type = true
				
				
				this.selectTimeShow.map(res => {
					if (!res.type) {
						type = false
						return uni.showToast({
							title: '没有选择' + res.title,
							duration: 2000,
							icon:'none'
						});
					}
				})
				
				
				if(type){
					this.$emit('submit', this.selectTimeShow.map(res => ({
						title: res.title,
						value: res.value
					})))
					
					this.close2()
				}


			},
			
			change(e){
				this.$emit('setPagemetaShow',e)
			}
			

		}
	}
</script>

<style lang="less" scoped>
	.timeSelectBox {
		height: 80vh;
		background-color: #fff;
		border-radius: 32rpx 32rpx 0 0;

		// 操作区
		.top {
			#flex(-, space-between, center);
			#box(100%, 96rpx);
			#padding(0 32rpx);
			border-bottom: 2rpx solid #E8E8E8;

			.top-left {
				#font(28rpx, #82899e, 400);
			}

			.top-center {
				#font(32rpx #323233);
			}

			.top-right {
				#font(28rpx, #3385FF, 400);
			}
		}

		// 选中时间展示
		.center {
			#flex(-, space-between, center);
			#padding(32rpx 108rpx 0 108rpx);

			margin: 0 32rpx;
			border-bottom: 2rpx solid #E8E8E8;

			.center-item {
				#flex(column, start, center);
				#padding(0 0 32rpx 0);

				position: relative;

				.center-title {
					#font(24rpx, #3c4766, 400);
				}

				.center-text {
					#font(32rpx, #3c4766, 400);
					margin-top: 24rpx;
				}

				.center-line {
					#box(56rpx, 4rpx, 0, #ec606f);
					position: absolute;
					left: 50%;
					margin-left: -28rpx;
					bottom: 0;

				}

			}

			.center-item.center-active {
				.center-text {
					color: #EC606F;
				}

			}
		}


	}
</style>